define(['jquery','WebUploader'],function($,WebUploader){
	Vue.component('imgUploader',{
		template: '\
					<div class="uploader-btn-wrapper">\
						<div class="uploader-thumb-wrapper">\
							<slot></slot>\
						</div>\
						<div v-uploader></div>\
					</div>',
		props: ['img','opt'],
		data: function() {
			return {
				uploader: {},
				defaultOptions: {
					auto: true,
					//类型限制;
					accept:{
						title:"Images",
						extensions:"gif,jpg,jpeg,bmp,png",
						mimeTypes:"image/*"
					},
					//配置生成缩略图的选项
					thumb:{
						width:200,
						// height:75,
						quality:70, // 图片质量，只有type为`image/jpeg`的时候才有效
						allowMagnify:false, // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false
						crop:false, // 是否允许裁剪。
						type:"image/jpeg" // 为空的话则保留原有图片格式,否则强制转换成指定的类型
					},
					method:"POST", //文件上传方式
					server:"", //服务器地址
					sendAsBinary:false, //是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容
					chunked:false, // 开起分片上传。 thinkphp的上传类测试分片无效,图片丢失;
					//chunkSize:1024 * 2048, // 分片大小
					fileNumLimit:100, //最大上传的文件数量
					fileSizeLimit:1024 * 1024 * 100, //总文件大小
					fileSingleSizeLimit:1024 * 1024 * 5 //单个文件大小(单位字节);
				}
			}
		},
		directives: {
			'uploader': {
				bind: function(el,binding,vNodes){
 					let vm = vNodes.context;
					let opt = $.extend(true,{},vm.defaultOptions,vm.opt,{
			            pick: {
			                id: el,
			                innerHTML: '',
			                mutiple: false
			            }
			        });

					let uploader = WebUploader.create(opt);
					vm.uploader = uploader;
					uploader.on('fileQueued',function(file){
						vm.$emit('file-added',vm.img,file);
						uploader.makeThumb(file, function( error, src ) {
					        vm.img.thumb = src;							
					    }, opt.thumb.width, opt.thumb.height);
					});

					uploader.on('uploadSuccess',function(file,res){
						vm.$emit('file-uploaded',vm.img,file,res);
					});

					uploader.on('uploadProgress',function(file,percentage){
						vm.img.percent = Math.round(percentage * 100);
						vm.$emit('file-uploaded',vm.img,file,percentage);
					});

					// var vm = vNodes.context;
					// var opt = $.extend(true,{},vm.defaultOptions,vm.opt,{
					// 	browse_button:el.children[0],
					// 	init: {
					// 		PostInit: function() {
					// 		},
					// 		FilesAdded: function(up,files){
					// 			vm.$emit('file-added',vm.img,up,files);
					// 			vm.previewImage(files[0],function(src){
					// 				vm.img.thumb = src;							
					// 				uploader.start();
					// 			})
					// 		},
					// 		//显示上传进度显示
					// 		UploadProgress: function(up, file) {
					// 			vm.$emit('file-progress',vm.img,up,file);
					// 		},
					// 		//文件上传
					// 		FileUploaded: function(up,file,result){
					// 			vm.$emit('file-uploaded',vm.img,up,file,JSON.parse(result.response));
					// 		},
					// 		Error: function(up,err) {
					// 			if(err){
					// 				alert('网络故障，请稍后再试');
					// 			}
					// 		}
					// 	}
					// });

					// var uploader = new window.plupload.Uploader(opt);
					// uploader.init();
				}
			}
		}
	});
})